<template>
  <div class="dept">
    <!-- 操作区 -->
    <div class="topbox">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="部门名称">
          <el-input
            v-model="form.name"
            size="mini"
            placeholder="请输入部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" size="mini" placeholder="部门状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="openbox">
      <el-button
        type="info"
        plain
        size="mini"
        icon="el-icon-sort"
        @click="toggleRowExpansion"
      >
        展开/折叠
      </el-button>
    </div>
    <!-- 表格区 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="deptId"
      border
      v-loading="tableLoading"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      ref="dataTreeList"
    >
      <el-table-column
        prop="deptName"
        label="部门名称"
        sortable
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序"
        sortable
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '0' ? 'primary' : 'danger'"
            disable-transitions
            >{{ scope.row.status === "0" ? "正常" : "停用" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "dept",
  data() {
    return {
      input: "",
      // 操作区两个input的值
      form: {
        name: "",
        status: "",
      },

      // 表格相关
      tableData: [
        // {
        //   ancestors: "0",
        //   deptName: "物美智能",
        //   orderNum: "0",
        //   status: "0", //0：正常 1：停用
        //   createTime: "2021-12-15 21:36:18",
        //   children: [
        //     {
        //       ancestors: "0,100",
        //       deptName: "物美智能",
        //       orderNum: "0",
        //       status: "0", //0：正常 1：停用
        //       createTime: "2021-12-15 21:36:18",
        //     },
        //     {
        //       ancestors: "0,100",
        //       deptName: "物美智能",
        //       orderNum: "0",
        //       status: "0", //0：正常 1：停用
        //       createTime: "2021-12-15 21:36:18",
        //     },
        //   ],
        // },
      ],
      // 默认全部展示列表
      isExpansion: true,
      tableLoading: false,
    };
  },
  methods: {
    // 搜索
    search() {
      let deptName = this.form.name,
        status = this.form.status;
      // this.$refs.dataTreeList.removeAttribute("tree-props");
      // console.log(this.$refs.dataTreeList);
      // this.$refs.dataTreeList.removeAttribute
      this.init(deptName, status);
    },
    // 重置
    reset() {
      this.form.name = "";
      this.form.status = "";
      this.init();
    },
    // 处理树形数据
    setTreeData(data) {
      let cloneData = JSON.parse(JSON.stringify(data)); // 对源数据深度克隆
      // let minParentId = cloneData[0].parentId;
      // cloneData.forEach((item) => {
      //   if (item.parentId < minParentId) minParentId = item.parentId;
      // });
      return cloneData.filter((father) => {
        // 循环所有项，并添加children属性
        let children = cloneData.filter(
          (child) => father.deptId == child.parentId
        ); // 返回每一项的子级数组
        children.length > 0 ? (father.children = children) : ""; //给父级添加一个children属性，并赋值
        return father.parentId == 0; //返回第一层
      });
    },
    async init(deptName, status) {
      this.tableLoading = true;
      try {
        await this.$api.dept.sysNormalDisable();
        let { code, data, msg } = await this.$api.dept.getList(
          deptName,
          status
        );

        if (+code === 200) {
          // this.tableData = this.setTreeData(data);
          if (this.form.name || this.form.status === "1") {
            this.tableData = data;
          } else {
            this.tableData = this.setTreeData(data);
          }
        } else {
          this.$message.error(msg);
        }
      } catch (_) {}
      this.tableLoading = false;
    },
    // 树形表格展开/折叠
    toggleRowExpansion() {
      this.isExpansion = !this.isExpansion;
      this.toggleRowExpansionAll(this.tableData, this.isExpansion);
    },
    toggleRowExpansionAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children !== undefined && item.children !== null) {
          this.toggleRowExpansionAll(item.children, isExpansion);
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.dept {
  height: 100%;
  background: #fff;
  margin-left: 10px;
  .topbox {
    margin-bottom: 20px;
    .el-form {
      padding-top: 20px;
      display: flex;
      /deep/.el-form-item__label {
        font-size: 14px;
        color: #606266;

        font-weight: 700;
      }
      .el-form-item {
        margin-bottom: 0px;
      }
      .el-form-item:nth-child(3) {
        .el-form-item__content {
          margin-left: 20px !important;
        }
      }
    }
  }
  .openbox {
    margin: 5px;
  }
}
</style>